<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" name="referrer" content="strict-origin-when-cross-origin">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>获取地图状态</title>
    <script src="../../../assets/ol/v5.3.0/ol.js"></script>
    <script src="../../../assets/script/jquery-2.1.1.min.js"></script>
    <script src="../../../assets/script/proj4.js"></script>
    <link rel="stylesheet" href="../../../assets/ol/v5.3.0/ol.css">
    <script src="../../../assets/bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" href="../../../assets/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../../../assets/bootstrap/css/bootstrap-theme.css">
    <style>
    </style>
</head>

<body>

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-8">
            <div id="map" title="地图显示"></div>
        </div>
        <div class="col-xs-4">
            <div class="state">
                <div class="state-item zoom-state">
                    <label for="">缩放级别：</label>
                    <span class="zoomValue"></span>
                </div>
                <div class="state-item lnglat-state">
                    <label for="">经度：</label>
                    <span class="lngValue"></span>
                    <label for="">纬度：</label>
                    <span class="latValue"></span>
                </div>
                <div class="state-item scale-state">
                    <label for="">比例尺：</label>
                    <span class="scaleValue"></span>
                </div>
            </div>
            <div class="custom-scale-line" id="custome-scale-line"></div>
        </div>
    </div>
</div>
<script src="../../../assets/script/v5.3.0-common.js"></script>
</body>
<script>
    loadTdtMapLayer();
    // 获取地图缩放级别
    const zoomEle = document.querySelector(".zoomValue")
    map.on('postrender', evt => {
        const view = map.getView()
        zoomEle.textContent = view.getZoom()
    })

    // 获取点击位置的经纬度
    const lngEle = document.querySelector(".lngValue")
    const latEle = document.querySelector(".latValue")
    // pointermove 鼠标移动事件
    map.on("click", evt => {
        const coords = evt.coordinate
        lngEle.textContent = coords[0];
        latEle.textContent = coords[1];
    })

    // 获取地图比例尺
    const scaleControl = new ol.control.ScaleLine({
        units : 'metric', // 'degrees-度', 'imperial-英制单位', 'nautical-海里', 'metric-米', 'us',默认值'metric'
        className: 'custom-scale-line',
        target: document.querySelector(".custom-scale-line"),// 放置比例尺控件的目标容器
    })
    map.addControl(scaleControl)
</script>

</html>
